#chatRoom{
    background: $maingray;
    padding-top:10px;
    
    .main{
        padding:0 10px;
        height:calc(100vh - 70px);       
        max-width: $mainWidth;
        margin:0 auto;
        background: $white;       
        .content{
            height:calc(100vh - 200px);    
            overflow: auto;  
            padding-bottom: 20px;
            ul{
                li{
                    .system{
                        height:18px;
                        line-height: 20px;
                        background: $maingray;
                        width:45%;
                        margin:5px auto;
                        text-align: center;
                        border-radius: 3px;
                        font-size: 10px;
                    }
                    .self{
                        text-align: right;
                        .message{
                            background: red;
                        }
                    }
                    .others{
                        .message{
                            background: green;
                        }
                    }
                    .name{
                        color:$gray;
                        margin:5px 0;
                    }
                    .message{
                        display: inline-block;
                        padding:4px 10px 2px;
                        color:$white;
                        border-radius: 2px;
                        font-size: 14px;
                        max-width: 75%;
                        line-height: 24px;
                    }
                }
            }    
        }
        .text{
            height: 130px;
            border-top:1px solid $maingray;
            .line,.mu-text-field-line{
                background: none;
            }
            .mu-raised-button{
                float:right;
            }
        }
    }
}
